<template>
  <div>
    <a-alert message="分别请求不同的中台接口包 （cn.keytop.stc.webide.demo-client） 和 （cn.keytop.stc.webide.demo2-client）"
             type="info"></a-alert>

    <a-alert message="tips：开启F12查看控制台，即可看到接口相关信息打印~"
             type="info"></a-alert>
    <a-card title="请求中台接口包（cn.keytop.stc.webide.demo-client）">
      <a-table rowKey="id"
               :columns="nodeAPI.columns"
               :dataSource="nodeAPI.tableData"
               :loading="nodeAPI.loading"
               :pagination="false">

        <template #time="{text}">
          {{$dayjs(text).format('YYYY-MM-DD HH:mm:ss')}}
        </template>

      </a-table>
    </a-card>

    <a-card title="请求中台接口包（cn.keytop.stc.webide.demo2-client）">
      <a-table rowKey="id"
               :columns="nodeAPI2.columns"
               :dataSource="nodeAPI2.tableData"
               :loading="nodeAPI2.loading"
               :pagination="false">

        <template #time="{text}">
          {{$dayjs(text).format('YYYY-MM-DD HH:mm:ss')}}
        </template>

      </a-table>
    </a-card>
  </div>
</template>


<script lang="ts">
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  reactive,
  toRaw,
  watch
} from 'vue';

import useGlobal from '@/hooks/useGlobal';
import {
  queryOrderList,
  QueryOrderListDeclare
} from 'cn.keytop.stc.webide.demo-client';

import {
  queryOrderList as queryOrderList2,
  QueryOrderListDeclare as QueryOrderListDeclare2
} from 'cn.keytop.stc.webide.demo2-client';

import { getGuid } from '@/utils';

export default defineComponent({
  name: 'SolutionRequestMid',
  setup(props, ctx) {
    const { $request, $modal } = useGlobal();

    const nodeAPI = reactive({
      loading: false,
      tableData: [] as QueryOrderListDeclare.$results.Order[],
      columns: [
        {
          title: '订单编号',
          dataIndex: 'orderNo',
          align: 'center'
        },
        {
          title: 'inTime',
          dataIndex: 'inTime',
          slots: { customRender: 'time' },
          align: 'center'
        },
        {
          title: 'outTime',
          dataIndex: 'outTime',
          slots: { customRender: 'time' },
          align: 'center'
        }
      ] as IColumn[]
    });

    const requestNodeAPI = async () => {
      nodeAPI.loading = true;
      const { code, data, message } = await queryOrderList({}, {
        loading: true
      } as IAxiosRequestConfig);
      nodeAPI.loading = false;
      if (code === 2000) {
        nodeAPI.tableData = data!.map(item => ({ ...item, id: getGuid() }));
      }
    };

    const nodeAPI2 = reactive({
      loading: false,
      tableData: [] as QueryOrderListDeclare2.$results.Order[],
      columns: [
        {
          title: '订单编号',
          dataIndex: 'orderNo',
          align: 'center'
        },
        {
          title: 'inTime',
          dataIndex: 'inTime',
          slots: { customRender: 'time' },
          align: 'center'
        },
        {
          title: 'outTime',
          dataIndex: 'outTime',
          slots: { customRender: 'time' },
          align: 'center'
        }
      ] as IColumn[]
    });

    const requestNodeAPI2 = async () => {
      nodeAPI2.loading = true;
      const { code, data, message } = await queryOrderList2({});
      nodeAPI2.loading = false;
      if (code === 2000) {
        nodeAPI2.tableData = data!.map(item => ({ ...item, id: getGuid() }));
      }
    };

    onMounted(() => {
      requestNodeAPI();
      requestNodeAPI2();
    });

    return {
      nodeAPI,
      nodeAPI2
    };
  }
});
</script>

<style lang="less" scoped>
</style>